<template>
  <div class="w-[100%] h-[50px]  bg-gray-200 rounded-md px-3 py-2 my-1 hover:bg-gray-300 cursor-move">
    <audio ref="audio">
      <source src="../assets/audio/提示成功.MP3" type="audio/ogg" />
    </audio>
    <div class="mx-2 float-left">
      <el-checkbox ref="checkboxRef" class="mx-2 " @change="isFinished(task)" :checked="task.isFinished"></el-checkbox>
    </div>
    <div class="float-left ">
      <p :class="{'line-through text-slate-500': task.isFinished}">{{ task.content }}</p>
      <p class=" text-[14px] text-gray-500">任务</p>
    </div>
    <div class="float-right mr-1 ">
      <el-button @click="taskStore.deleteTaskList(task)" :icon="Close" size="small" type="danger" circle />
    </div>
    <div class="float-right mr-1 cursor-pointer"  @click="task.isImportant = !task.isImportant">
      <el-icon v-if="!task.isImportant" size="24">
        <Star />
      </el-icon>
      <el-icon v-else size="26" color="#a969aa">
        <StarFilled />
      </el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Star, StarFilled } from "@element-plus/icons-vue";
import { Close } from "@element-plus/icons-vue";
import { Task } from "@/types/task";
import { taskUseStore } from "@/stores/index";
import { onMounted, ref } from "vue";

// 定义组件属性
defineProps<{
  task: Task;
}>();

const checkboxRef = ref();
const audio = ref();
onMounted(() => {
  console.log(checkboxRef.value);
});
const taskStore = taskUseStore();

function isFinished(task: Task) {
  taskStore.changeIsFinished(task);
  console.log(task);
  if (task.isFinished === true) {
    audio.value.play();
  }
}

</script>

<style lang="scss" scoped>
</style>